<template>
    <el-card class="right-menu"
             v-if="value"
             :style="{top:event.y+'px',left:event.x+'px'}"
             :body-style="{ padding: 0 }">

        <ul class="list">
            <li class="item el-select-dropdown__item"
                v-for="(item,i) in items" v-text="item"
                @click="itemClick(item,i)"></li>
        </ul>

    </el-card>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2018/11/17 15:05
   *
   * 右键菜单
   **/
  export default {
    name: 'RightMenu',
    props: {
      value: {
        type: Boolean
      },
      event: {
        required: true
      },
      items: {
        type: Array,
        required: true
      },
    },
    watch: {
      value(val) {
        if (val) {
          document.addEventListener('click', () => {
            this.$emit('input', false);
          });
        } else {
          document.removeEventListener('click', () => {
          });
        }
      }
    },
    methods: {
      itemClick(item, index) {
        this.$emit('click', item, index);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .right-menu {
        position absolute
        top 0
        left 0

        .list {
            width 100%
            list-style none
            margin 0
            padding 0
            box-sizing border-box
        }

        .item {
            width 100%
            height 30px
            line-height 30px
            text-align center
        }
    }
</style>
